<template>
    <div class="body">
        <h3 class="top">伪类和伪元素</h3>
        <h4 class="left" id="pseudoclass">伪类选择器</h4>
        <p>用于已有元素处于某种状态时(滑动，点击等)为其添加对应的样式，这个状态是根据用户行为而动态变化的</p>
        <table class="dynamic">
            <thead>
                <tr>
                    <th>动态伪类</th>
                    <th>作用</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a href="www.baidu.com" @click="noSkip">:link</a></td>
                    <td>链接没有访问时的样式效果，字体为绿色</td>
                </tr>
                <tr>
                    <td><a href="www.baidu.com" @click="noSkip">:visited</a></td>
                    <td>链接没有访问后的样式效果，字体为红色</td>
                </tr>
                <tr>
                    <td><a href="www.baidu.com" @click="noSkip">:hover</a></td>
                    <td>鼠标悬停在元素上面的样式效果，字体为蓝色</td>
                </tr>
                <tr>
                    <td><a href="www.baidu.com" @click="noSkip">:active</a></td>
                    <td>鼠标点击元素时的样式效果，字体为橙色</td>
                </tr>
                <tr>
                    <td><input type="text" placeholder=":foccus"></td>
                    <td>用于元素获得焦点时的样式效果，常用于表单元素</td>
                </tr>
            </tbody>
        </table>
        <table class="structure">
            <thead>
                <tr>
                    <th>结构伪类</th>
                    <th>作用</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>:frist-child</td>
                    <td>选择第一个子元素,背景颜色为红色</td>
                </tr>
                <tr>
                    <td>:nth-child(2)</td>
                    <td>选择某个当前元素的兄弟节点下的一个或多个特定子元素，从前往后数，背景为黄色</td>
                </tr>
                <tr>
                    <td>:nth-of-type(3)</td>
                    <td>当前元素的同类型兄弟节点的第n个当前元素，从前往后数，背景颜色为青色</td>
                </tr>
                <tr>
                    <td>:first-of-type</td>
                    <td>选择一个父级元素下第一个同类型元素，字体为金色</td>
                </tr>
                <tr>
                    <td>:last-of-type</td>
                    <td>选择一个父级元素下最后一个同类型元素，字体为紫色</td>
                </tr>
                <tr>
                    <td colspan="2">:only-child选择元素是它父元素的唯一一个子元素，背景为粉红色</td>
                </tr>
                <tr>
                    <td colspan="2">:only-of-type选择一个元素是上下级元素唯一一个相同类型的元素,字体为天蓝色</td>
                </tr>
                <tr>
                    <td>:nth-last-of-type(3)</td>
                    <td>当前元素的同类型兄弟节点的第n个当前元素，从后往前数,背景颜色为蓝色</td>
                </tr>
                <tr>
                    <td>:nth-last-child(2)</td>
                    <td>选择某个当前元素的兄弟节点下的一个或多个特定子元素，从后往前数，背景为绿色</td>
                </tr>
                <tr>
                    <td>:last-child</td>
                    <td>选择第最后一个子元素,背景颜色为橙色</td>
                </tr>

            </tbody>
        </table>
        <table class="deny">
            <thead>
                <tr>
                    <th>否定伪类</th>
                    <th>作用</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="selector">:not(selector)</td>
                    <td>选择除selector外的所有元素，背景为红色</td>
                </tr>
            </tbody>
        </table>
        <table class="state">
            <thead>
                <tr>
                    <th>状态伪类</th>
                    <th>作用</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <!-- enabled:批准 -->
                    <td><input type="text" placeholder=":enabled"></td>
                    <!-- 如果元素可以被激活（例如被选择、单击、输入文本等），或者能够获得焦点，那么它就是启用的。 -->
                    <td>表示任何已启用的元素。</td>
                </tr>
                <tr>
                    <!-- disabled:拒绝 -->
                    <td><input type="text" placeholder=":disabled" disabled></td>
                    <!-- 如果一个元素不能被激活（如选择、点击或接受文本输入）或获取焦点，则该元素处于被禁用状态。 -->
                    <td>表示任何被禁用的元素</td>
                </tr>
                <tr>
                    <td><input type="checkbox">
                        <label>:checked</label>
                    </td>
                    <td>择器表示任何处于选中状态的radio, checkbox</td>
                </tr>
            </tbody>
        </table>
        <table class="target">
            <thead>
                <tr>
                    <th>目标伪类</th>
                    <th>作用</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td id="target">:target</td>
                    <td>表示一个唯一的元素（目标元素），其 id 与当前 URL 片段匹配。vue项目中无法实现</td>
                </tr>
            </tbody>
        </table>
        <h4 class="left" id="pseudo-elements">伪元素选择器</h4>
        <p>用于创建一些不在DOM树中的元素，并为其添加样式，需要注意：在使用伪元素的时候'content'是必须的</p>
        <table class="pseudo">
            <thead>
                <tr>
                    <th>伪元素选择器</th>
                    <th>作用</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>::before</td>
                    <td><span>用来创建一个内部元素，它的内容会覆盖在父元素的内容之前</span></td>
                </tr>
                <tr>
                    <td>::after</td>
                    <td>
                        <span>用来创建一个外部元素，它的内容会覆盖在父元素的内容之后</span>
                    </td>
                </tr>
                <tr>
                    <td>::frist-line</td>
                    <td>
                        在某 block-level element （块级元素）的第一行应用样式。<br>
                        <span>注意：该伪元素只能用于块级元素</span>
                    </td>
                </tr>
                <tr>
                    <td>::frist-letter</td>
                    <td>
                        会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）
                    </td>
                </tr>
                <tr>
                    <td>::selection</td>
                    <td>
                        CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
                    </td>
                </tr>
                <tr>
                    <td><input type="text" placeholder="::placeholder"></td>
                    <td>
                        选择一个表单元素的占位文本 (en-US)，它允许开发者和设计师自定义占位文本 (en-US)的样式。
                    </td>
                </tr>
            </tbody>
        </table>
        <h4 class="left" id="examples">实例</h4>
        <p class="left">流光边框</p>
        <div class="box left">
            <div class="mflow-box">
                <span>流光边框</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
//阻止a标签的跳转
function noSkip(event: Event) {
    event.preventDefault();
}
</script>

<style lang='scss' scoped>
.body {
    height: inherit;
    flex: 5;
    background-color: #fff;
    margin-left: 30px;
    text-align: center;

    .top {
        margin-top: 20px;
    }

    .left {
        text-align: left;
        margin-left: 112px;
        margin-bottom: 10px;
    }

    table {
        /*  border: 1px solid #000; */
        border-collapse: collapse;
        margin: 20px auto;
        width: 740px;

        th,
        td {
            border: 1px solid #000;
        }
    }
}

.dynamic {
    td {
        a:link {
            /* 未访问的链接 */
            color: forestgreen;
        }

        a:visited {
            /* 访问过的链接 */
            color: red;
        }

        a:hover {
            /* 鼠标悬停在链接上的样式效果 */
            color: blue;
        }

        a:active {
            /* 激活链接 */
            color: orange;
        }

        input:focus {
            background-color: lightblue;
        }
    }
}

.structure {
    tbody {

        tr:first-child {
            background-color: red;
        }

        tr:last-child {
            background-color: orange;
        }

        tr:nth-child(2) {
            background-color: yellow;
        }

        tr:nth-last-child(2) {
            background-color: green;
        }

        tr:nth-of-type(3) {
            background-color: cyan;
        }

        tr:nth-last-of-type(3) {
            background-color: blue;
        }

        tr {
            td:first-of-type {
                color: gold;
            }

            td:last-of-type {
                color: purple;
            }

            td:only-child {
                background-color: pink;
            }

            td:only-of-type {
                color: skyblue;
            }
        }
    }
}

.deny {
    tbody {
        tr {
            td:not(.selector) {
                background-color: red;
            }
        }
    }
}

.state {

    tbody {
        tr {
            td {
                input:enabled {
                    background-color: lightblue;
                }

                input:disabled {
                    background-color: gray;
                }

                input:checked+label {
                    color: red;
                }
            }
        }
    }
}

.target {
    tbody {
        tr {
            td:target {
                background-color: gold;
            }

            /* 在目标元素中增加一个伪元素*/
            td:target::before {
                font: 70% sans-serif;
                content: "►";
                color: limegreen;
                margin-right: 0.25em;
            }
        }

    }

}

.pseudo {
    tbody {
        tr:first-child {
            td:last-child::before {
                content: "添加的内容";
                color: red;
            }
        }

        tr:nth-child(2) {
            td:last-child::after {
                content: "添加的内容";
                color: red;
            }
        }

        tr:nth-child(3) {
            td:last-child::first-line {
                color: red;
            }
        }

        tr:nth-child(4) {
            td:last-child::first-letter {
                color: red;
            }
        }

        tr:nth-child(5) {
            td:last-child::selection {
                background-color: red;
            }
        }

        tr:nth-child(6) {
            td {
                input::placeholder {
                    color: red;
                }
            }
        }
    }
}

.box {
    /*  width: 100%;
    height: 200px; */
    /* padding: 30px 0 0 50px; */
    /* background-color: #000; */

    .mflow-box {
        width: 200px;
        height: 120px;
        background-color: #ffffff;
        border-radius: 20px;
        position: relative;
        overflow: hidden;

        span {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 100%;
            font-size: 28px;
            text-align: center;
            line-height: 110px;
            color: #F0C237;
            z-index: 8;
        }
    }

    .mflow-box::before {
        content: "";
        width: calc(100% - 6px);
        height: calc(100% - 6px);
        background-color: #000;
        border-radius: 20px;
        position: absolute;
        top: 3px;
        left: 3px;
        z-index: 2;
    }

    .mflow-box::after {
        content: "";
        width: 200%;
        height: 200%;
        background-color: antiquewhite;
        background-image: conic-gradient(from 45deg at 50% 50%, red, orange, yellow, green, blue, indigo, violet);
        border-radius: 20px;
        position: absolute;
        top: -50%;
        left: -50%;
        z-index: 1;
        animation: rotate 5s linear infinite;
    }

    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }
}
</style>